<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/reset.css">
    <title>轮播图</title>
    <style>
        .slider {
            width: 500px;
            height: 326px;
        }

        .photo img {
            width: 500px;
            overflow: hidden;
        }

        .desc {
            background-color: #8c7650;
            box-sizing: border-box;
            padding: 10px;
            display: flex;
            justify-content: space-between;
        }

        .desc p {
            font-size: 16px;
            color: white;
        }

        .slider ul {
            display: flex;
            margin: 10px 0;
        }

        .slider ul li {
            width: 12px;
            height: 12px;
            background-color: #a6888b;
            margin-right: 10px;
            border-radius: 50%;
        }

        .slider ul .active {
            transform: scale(1.3);
            background-color: aliceblue;
        }

        .btn button {
            width: 20px;
            height: 20px;
            background-color: #a6888b;
            color: white;
        }

        .btn button:first-child {
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div class="slider">
        <div class="photo">
            <img src="./images/slider01.png" alt="fenging">
        </div>
        <div class="desc">
            <div>
                <p>对人类来说会不会</p>
                <ul>
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="btn">
                <button class="left">&lt;</button>
                <button class="right">&gt;</button>
            </div>
        </div>
    </div>
    <script>
        // 轮播图数据
        const sliderData = [
            { url: './images/slider01.png', title: '山层层叠叠，连绵起伏，形态各异，一山绿，一山青', color: '#8c7650' },
            { url: './images/slider02.png', title: '倒影翩翩，两岸景色犹如百里画廊.', color: '#f68cb8' },
            { url: './images/slider03.png', title: '峰峦叠嶂，碧水如镜，青山浮水', color: '#9ba2ca' },
            { url: './images/slider04.png', title: '如远山悠然又似江水浩瀚，投一眼陷入', color: '#5d9eb2' },
            { url: './images/slider05.png', title: '岸旁杨柳拂动，湖光山色，异常美丽', color: '#303938' },
            { url: './images/slider06.png', title: '无风时候，水平如镜，朵朵白云', color: '#9b6f49' },
        ]
        let i = 0
        const img=document.querySelector('.photo img')
        const p=document.querySelector('.desc p')
        const desc=document.querySelector('.desc')
        // 左右按钮
        const right=document.querySelector('.right')
        right.addEventListener('click',function(){
            i++
            if(i>=sliderData.length){
                i=0
            }
           render()
        })
        const left=document.querySelector('.left')
        left.addEventListener('click',function(){
            i--
            if(i<0){
                i=sliderData.length-1
            }
            render()
        })
        function render(){
             // 修改图片src
             img.src = sliderData[i].url
            // 修改文字
            p.innerHTML = sliderData[i].title
            // 修改小圆点
            document.querySelector('ul .active').classList.remove('active')
            document.querySelector(`ul li:nth-child(${i + 1})`).classList.add('active')
            // 想修改背景颜色
            desc.style.backgroundColor = sliderData[i].color
        }

        // 自动播放
        let timerId=setInterval(function(){
            right.click()
        },1500)

        const slider=document.querySelector('.slider')
        slider.addEventListener('mouseenter',function(){
            clearInterval(timerId)
        })
        slider.addEventListener('mouseleave',function(){
            clearInterval(timerId)
            timerId=setInterval(function(){
            right.click()
        },1500)
        })

    </script>
</body>

</html>